<template>
    <div class="order-box">
        <el-button type="primary" @click="dialogFormVisible = true">添加分类</el-button>
        <el-table :data="tableData" class="table-box">
            <el-table-column
                prop="firstClassName"
                label="一级分类名称"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="firstClassHead"
                align="center"
                label="一级分类负责人">
            </el-table-column>
            <el-table-column
                prop="secondClassName"
                align="center"
                label="二级分类名称">
            </el-table-column>
            <el-table-column
                prop="secondClassHead"
                align="center"
                label="二级分类负责人">
            </el-table-column>
            <el-table-column
                prop="thirdClassName"
                align="center"
                label="三级分类名称">
            </el-table-column>
            <el-table-column
                prop="thirdClassHead"
                align="center"
                label="三级分类负责人">
            </el-table-column>
            <el-table-column
                prop="id"
                align="center"
                label="操作"
                width="180">
                <template slot-scope="scope">
                    <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination  v-show="total > 0" :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getList"></pagination>
        <!-- 添加分类弹框 -->
        <el-dialog title="添加分类" :visible.sync="dialogFormVisible" class="addclassify" width="30%" >
            <el-form :model="addForm" :rules="rules" ref="addForm">
                <el-form-item label="一级分类名称:" :label-width="formLabelWidth" prop="firstClassName">
                    <el-input v-model="addForm.firstClassName" autocomplete="off" placeholder="请填写"></el-input>
                </el-form-item>
                <el-form-item label="负责人:" :label-width="formLabelWidth" prop="firstClassHead">
                    <el-select v-model="addForm.firstClassHead" placeholder="请选择负责人">
                        <el-option :label="item.userName" :value="item.userId" v-for="item in options" :key="item.userId"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-dialog
                width="30%"
                title="添加分类"
                :visible.sync="dialogSedForm"
                append-to-body>
                <el-form   ref="sedform">
                    <el-form-item label="二级分类名称:" :label-width="formLabelWidth" prop="secondClassName">
                        <el-input v-model="addForm.secondClassName" autocomplete="off" placeholder="请填写"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人:" :label-width="formLabelWidth" prop="secondClassHead">
                        <el-select v-model="addForm.secondClassHead" placeholder="请选择负责人">
                            <el-option :label="item.userName" :value="item.userId" v-for="item in options" :key="item.userId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-dialog
                    width="30%"
                    title="添加分类"
                    :visible.sync="dialogThirdForm"
                    append-to-body>
                    <el-form   ref="thirdform">
                        <el-form-item label="三级分类名称:" :label-width="formLabelWidth" prop="thirdClassName">
                            <el-input v-model="addForm.thirdClassName" autocomplete="off" placeholder="请填写"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人:" :label-width="formLabelWidth" prop="thirdClassHead">
                        <el-select v-model="addForm.thirdClassHead" placeholder="请选择负责人">
                            <el-option :label="item.userName" :value="item.userId" v-for="item in options" :key="item.userId"></el-option>
                        </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false" size="medium">上一步</el-button>
                        <el-button @click="dialogFormVisible = false" size="medium">取 消</el-button>
                        <el-button type="primary" @click="getFinish()" size="medium">确 定</el-button>
                    </div>
                </el-dialog>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" size="medium">取 消</el-button>
                    <el-button type="primary" @click="getSedStep()" size="medium">下一步</el-button>
                </div>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="medium">取 消</el-button>
                <el-button type="primary" @click="getStep('addForm')" size="medium">下一步</el-button>
            </div>
        </el-dialog>
        <!-- 编辑弹框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" class="edit-box" width="30%">
            <el-form :model="editForm" ref="editForm">
                <el-form-item label="一级分类名称:" :label-width="formLabelWidth" prop="classify">
                    <el-input v-model="editForm.firstClassName" autocomplete="off" placeholder="请填写"  :disabled="firstDisabled"></el-input>
                </el-form-item>
                <el-form-item label="负责人:" :label-width="formLabelWidth"  prop="name">
                    <el-select v-model="editForm.firstClassHead" placeholder="请选择负责人">
                        <el-option :label="item.userName" :value="item.userId" v-for="item in options" :key="item.userId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类名称:" :label-width="formLabelWidth" prop="sedclassify">
                    <el-input v-model="editForm.secondClassName" autocomplete="off" placeholder="请填写" :disabled="secondDisabled"></el-input>
                </el-form-item>
                <el-form-item label="负责人:" :label-width="formLabelWidth" prop="sedname">
                    <el-select v-model="editForm.secondClassHead" placeholder="请选择负责人">
                        <el-option :label="item.userName" :value="item.userId" v-for="item in options" :key="item.userId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级分类名称:" :label-width="formLabelWidth" prop="thirdclassify">
                    <el-input v-model="editForm.thirdClassName" autocomplete="off" placeholder="请填写" :disabled="thirdDisabled"></el-input>
                </el-form-item>
                <el-form-item label="负责人:" :label-width="formLabelWidth" prop="thirdname">
                    <el-select v-model="editForm.thirdClassHead" placeholder="请选择负责人">
                        <el-option :label="item.userName" :value="item.userId" v-for="item in options" :key="item.userId"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false" size="medium">取 消</el-button>
                <el-button type="primary" @click="getEdit()" size="medium">确定</el-button>
            </div>
        </el-dialog>
        <!-- 删除弹框 -->
        <el-dialog title="删除" class="del-box" :visible.sync="dialogTableVisible" width="30%">
            <p>删除这条记录？</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false" size="medium">取 消</el-button>
                <el-button type="primary" @click="getSubmit" size="medium">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import { queryList,editInfro,getFaeOption,deleteOrder,editSumbit,addOrder } from '@/api/order'
    import pagination from '@/components/pagination'
    export default{
        components:{
            pagination
        },
        data(){
            return{
                pageIndex:1,
                pageSize:20,
                total:0,
                tableData: [],
                firstDisabled:false,
                secondDisabled:false,
                thirdDisabled:false,
                dialogFormVisible:false,
                dialogSedForm:false,
                dialogThirdForm:false,
                dialogTableVisible:false,
                editVisible:false,
                orderId:0,
                options:[
                ],
                addForm:{
                    firstClassHead: "",
                    firstClassName: "",
                    secondClassHead: "",
                    secondClassName: "",
                    thirdClassHead: "",
                    thirdClassName: ""
                },
               
                rules: {
                    firstClassName: [
                        { required: true, message: '请输入一级分类名称', trigger: 'blur' },
                    ],
                },
                editForm:{
                    firstClassName:"",
                    firstClassHead:'',
                    id:0,
                    secondClassHead:'',
                    secondClassName:'',
                    thirdClassHead:'',
                    thirdClassName:'',
                },
                formLabelWidth: '120px'
            }
        },
        created(){
            this.getList();
            this.getOption();
        },
        methods:{
            getList(){
                queryList(this.pageIndex,this.pageSize).then(res=>{
                    if(res.code == 200){
                        this.total = res.result.count;
                        this.tableData = res.result.data;
                        console.log(this.tableData,'this.tableData');
                    }
                })
            },
            handleEdit(index, row) {
                this.editVisible = true;
                this.editForm.id = row.id;
                editInfro(this.editForm.id).then(res=>{
                    console.log(res.result,'333333');
                    if(res.code == 200){
                        this.editForm.firstClassName = res.result.firstClassName;
                        this.editForm.secondClassName = res.result.secondClassName;
                        this.editForm.thirdClassName = res.result.thirdClassName;
                        this.editForm.firstClassHead= parseInt(res.result.firstClassHeadId);
                        this.editForm.secondClassHead= parseInt(res.result.secondClassHeadId);
                        this.editForm.thirdClassHead = parseInt(res.result.thirdClassHeadId);
                        console.log(this.editForm.secondClassHead,',firstClassHead');
                        if(!this.editForm.firstClassHead){
                            this.editForm.firstClassHead = '';  
                        }
                        if(!this.editForm.secondClassHead){
                            this.editForm.secondClassHead = '';  
                        }
                        if(!this.editForm.thirdClassHead){
                            this.editForm.thirdClassHead = '';  
                        }
                      
                        
                        if(this.editForm.firstClassName){
                            this.firstDisabled = true;
                        }
                        if(this.editForm.secondClassName){
                            this.secondDisabled = true;
                        }
                        if(this.editForm.thirdClassName){
                            this.thirdDisabled = true;
                        }
                    }
                })
            },
            getOption(){
                getFaeOption().then(res=>{
                    console.log(res,'选项');
                    if(res.code == 200){
                        this.options = res.result;
                    }

                })
            },
            handleDelete(index, row) {
                this.dialogTableVisible = true;
                this.orderId = row.id;
            },
            getSubmit(){
                deleteOrder(this.orderId).then(res=>{
                    console.log(res);
                    if(res.success){
                        this.dialogTableVisible = false;
                        this.getList();
                    }else{
                        this.$message.warning(res.message);
                    }
                })
               
            },
            getStep(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogSedForm = true;
                    } else {
                        return false;
                    }
                });
            },
            getSedStep(){
                this.dialogThirdForm = true;
            },
            getFinish(){
                console.log(this.addForm,'addfrom');
                addOrder(this.addForm).then(res=>{
                    console.log(res,'res');
                    if(res.success){
                        this.$message.success('添加成功');
                        this.dialogThirdForm = false;
                        this.dialogSedForm = false;
                        this.dialogFormVisible = false;
                        this.getList();
                    }else{
                        this.$message.error(res.message);
                    }
                })
            },
            getEdit(){
                // console.log(this.editForm,'2222222');
                editSumbit(this.editForm).then(res=>{
                    console.log(res,'2222222233');
                    if(res.success){
                        this.editVisible = false;
                        this.getList();
                    }else{
                        this.$message.error(res.message);
                    }

                })
            },
        },

    }
</script>
<style lang="scss" scoped>
@import './../../assets/reset.css';
.order-box{
    width: 100%;
    padding: 20px 30px;
    .table-box{
        margin-top: 20px;
        width: 100%;
        border: 1px solid #dfe6ec;
    }
    .del-box{
       
        p{
            line-height: 30px;
            font-size: 20px;
            // font-weight: 600;
            color: #333333;
            text-align: center;
        }
       
    }
}
.el-dialog__wrapper{
    ::v-deep .el-dialog:not(.is-fullscreen){
        margin-top: 18vh !important;
    }
    ::v-deep .el-dialog__body{
        padding: 30px 20px 70px;
        border-top: 1px solid #F0F0F0;
        border-bottom: 1px solid #F0F0F0;
        .el-form-item__label{
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 32px;
        }
        .el-form-item--small.el-form-item{
            width: 80%;
        }
        .el-select{
            width: 100%;
        }
    }
    ::v-deep .el-dialog__footer{
        text-align: center;
    }
}
    
</style>